//
//  BackgroundAndOverlayBoot.swift
//  SwiftUIWidgetDemo
//
//  Created by alanzhangg on 2023/7/10.
//

import SwiftUI

struct BackgroundAndOverlayBoot: View {
    var body: some View {
        
        VStack {
            
            Image(systemName: "heart.fill")
                .font(.system(size: 40))
                .foregroundStyle(.white)
                .background(
                    Circle()
                        .fill(
                            LinearGradient(gradient: Gradient(colors: [Color.red, Color.blue]), startPoint: .leading, endPoint: .trailing)
                        )
                        .frame(width: 100, height: 100)
                        .shadow(color: Color(.custom), radius: /*@START_MENU_TOKEN@*/10/*@END_MENU_TOKEN@*/, x: 0.0, y: 10.0)
                        .overlay(alignment: .bottomTrailing, content: {
                            Circle()
                                .fill(.blue)
                                .frame(width: 35, height: 35)
                                .overlay {
                                    Text("5")
                                        .font(.headline)
                                        .foregroundStyle(.white)
                                }
                        })
                    
                )
            
            Spacer()
            
            Rectangle()
                .frame(width: 100, height: 100)
                .overlay(alignment: .topLeading) {
                    Rectangle()
                        .fill(.blue)
                        .frame(width: 50, height: 50)
                }
                .background(
                    Rectangle()
                        .fill(.red)
                        .frame(width: 150, height: 150),
                    alignment: .bottomLeading
                )
            
            Spacer()
            Circle()
                .fill(.pink)
                .frame(width: 100, height: 100, alignment: .center)
                .overlay {
                    Text("1")
                        .font(.largeTitle)
                        .foregroundStyle(.white)
                }
                .background(
                    Circle()
                        .fill(.purple)
                        .frame(width: 110, height: 110)
                )
            
            Spacer()
            Text("Hello, World!")
                .background {
    //                LinearGradient(gradient: /*@START_MENU_TOKEN@*/Gradient(colors: [Color.red, Color.blue])/*@END_MENU_TOKEN@*/, startPoint: /*@START_MENU_TOKEN@*/.leading/*@END_MENU_TOKEN@*/, endPoint: /*@START_MENU_TOKEN@*/.trailing/*@END_MENU_TOKEN@*/)
                    Circle()
                        .fill(LinearGradient(gradient: Gradient(colors: [Color.red, Color.blue]), startPoint: .leading, endPoint: .trailing))
                        .frame(width: 100, height: 100)
                }
                .background(
                    Circle()
                        .fill(LinearGradient(gradient: Gradient(colors: [Color.red, Color.blue]), startPoint: .leading, endPoint: .trailing))
                        .frame(width: 120, height: 120)
            )
        }
    }
}

#Preview {
    BackgroundAndOverlayBoot()
}
